:root {}
$head-height: 60px;
$foot-height: 104px;
$aside-width: 320px;

$bg-color: #fff;
header {
  background-color: $bg-color;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  .logo {
    width: $aside-width;
    height: $head-height;
    padding-left: 20px;
    display: flex;
    align-items: center;
    background-color: #f7f7fa;
    border-bottom: 1px solid #efefef;
    border-right: 1px solid #ececf5;
    img {
      width: 40px;
      height: 40px;
      display: block;
      margin-right: 5px;
      border-radius: 100%;
    }
    span {
      font-size: 18px;
      line-height: $head-height;
    }
  }
  .head-right {
    width: calc(100% - #{$aside-width});
    border-bottom: 1px solid #f3f3f4;
  }
}

// 侧边栏开始部分
aside {
  width: 320px;
  height: 100%;
  padding-top: 10px;
  position: fixed;
  z-index: 10;
  top: $head-height;
  left: 0;
  background-color: #f7f7fa;
  border-right: 1px solid #ececf5;
  .sidebar-menu {
    padding: 15px;
    & > ul > li {
      margin-bottom: 3px;
      &>a {
        align-items: center;
        display: flex;
        justify-content: flex-start;
        padding: 12px 15px;
        position: relative;
        transition: all .2s ease-in-out 0s;
        span {
          margin-left: 10px;
          transition: all .2s ease-in-out 0s;
          &.menu-arrow {
            position: absolute;
            right: 15px;
            display: inline-block;
            font-weight: 900;
            text-rendering: auto;
            line-height: 40px;
            font-size: 16px;
          }
        }
        // 划过样式
        &:hover {
          margin: 0 -15px;
          padding-left: 30px;
          background-color: #fff;
        }
      }
    }
    ul {
      li {
        font-weight: 400;
        & > a {
          color: #6f6f6f;
          font-size: 16px;
        }
        // 焦点样式
        &.active {
          & > a {
            background-color: #fff;
            color: #18aefa;
            position: relative;
            margin: 0 -15px;
            padding-left: 30px;
            &::before {
              content: "";
              width: 5px;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              background: #18aefa;
              transition: all .5s;
            }
          }
        }
        & a:hover {
          color: #18aefa;
          text-decoration: none;
        }
      }
      ul a {
        display: block;
        padding: 7px 10px 7px 45px;
        &:hover , &.active{
          color: #18aefa;
          text-decoration: none;
        }
      }
    }
  }
}
.menu-title {
  color: #9e9e9e;
  display: flex;
  font-size: 14px;
  padding: 5px 15px;
  white-space: nowrap;
}
/* 侧边栏结束 */

// 主体切换部分
main {
  width: calc(100% - #{$aside-width});
  //min-height: calc(100% - #{$head-height});
  //min-height: 100%;
  //height: 100%;
  margin-left: $aside-width;
  padding-top: $head-height;
  padding-bottom: calc(30px + #{$foot-height});
  box-sizing: border-box;
  .container {
    height: 100%;
    .item {
      height: 100%;
    }
  }
}

main {
  animation: fadeIn 1s;
}

// 页脚
footer {
  width: calc(100% - #{$aside-width});
  position: fixed;
  left: $aside-width;
  right: 0;
  bottom: 0;
  z-index: 9;
  height: $foot-height;
  line-height: $foot-height;
  padding-left: 30px;
  background-color: #ffffff;
  border-top: 1px solid #ddd;
}